<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 声明局部模板 -->
  <template id="loginmuban">
    <h1>用户登录</h1>
  </template>

  <div id="app">

    <login @zizujian="fuzujian"></login>

    <!-- <ul>

      <li v-for="item,index,index in listS">{{index}}---{{item}}</li>
    </ul> -->
  </div>
  <script src="/vue/lib/vue.js"></script>
  <script>

    const login = {
      //       template: `  <div> <h1>用户 {{name}} </h1>         <ul> <li v-for="item,index,index in lists">{{index}}{{item}}</li> </ul>
      //  </div>`,
      // template: ` <div><h1>大美女aa</h1></div>`
      template: ' <div> <h1>用户：{{name}}  年龄:{{age}}</h1>      < ul > <li v-for="item,index,index in lists">{{ index }} {{ item }} </li></ul><input type="button" value="点击子组件触发事件" @click="tanchaung"> </div> `',
      data() {
        // data函数，定义子组件的数据，使用的时候可以直接使用templates模板通过差值表达式可以直接获取
        return {
          name: '哈',
          age: 6,
          // lists: ["仵航", "22岁", "北京"]
          lists: ['哈哈6哈', '222', '山东']
        }
      },
      methods: {
        tanchaung() {
          // $emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法
          this.$emit('zizujian')
        }
      }
    }
    var vue = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        fuzujian() {
          alert('调用了父组件函数')
        }
      },
      components: {
        // 注册组件
        // 页面里的标签名字：定义的局部组件的名字
        //子组件
        login

      }
    })
  </script>
</body>

</html>